<template>
    <view>
		<view style="padding: 50rpx 0; text-align: center">--- slider ---</view>
		<j-slider :min="0" :max="100" :min-value="-20" :max-value="160"></j-slider>
		
		
		
		
		
		
		
		
		
		
        <view style="padding: 50rpx 0; text-align: center">--- cellGroup ---</view>
        <j-cell-group title="只显示模块标题"></j-cell-group>
        <j-cell-group title="显示模块标题及副标题" sub-title="副标题有时候也是很重要的"></j-cell-group>
        <j-cell-group icon="icon-settings" title="带字体图标的模块标题" sub-title="副标题有时候也是很重要的"></j-cell-group>
		<j-cell-group :custom-prefix="false" icon="https://statics.xmcsrv.net/account/HeadImage/jlink_7610.png" title="带图片图标的模块标题" sub-title="副标题有时候也是很重要的"></j-cell-group>
		<j-cell-group :custom-prefix="false" icon="https://statics.xmcsrv.net/account/HeadImage/jlink_7610.png" title="带圆角图片图标的模块标题" sub-title="副标题有时候也是很重要的" radius></j-cell-group>
        <j-cell-group icon="icon-settings" title="带action的模块" sub-title="副标题有时候也是很重要的" more @jftap="onBindjftap"></j-cell-group>

        <j-cell-group sub-title="副标题有时候也是很重要的" more @jftap="onBindjftap">
            <view slot="title" style="color: orange">自定义标题</view>
        </j-cell-group>

        <j-cell-group title="带action的模块" more @jftap="onBindjftap">
            <view slot="subTitle" style="color: orange">自定义副标题</view>
        </j-cell-group>

        <j-cell-group title="自定义action的模块" sub-title="副标题有时候也是很重要的">
            <view slot="action">
				<uni-icons custom-prefix="iconfont" type="icon-zengjia1" size="30" color="#FF0025"></uni-icons>
            </view>
        </j-cell-group>

        <j-cell-group title="自定义action的模块" sub-title="副标题有时候也是很重要的">
            <view slot="action">
                <switch></switch>
            </view>
        </j-cell-group>

        <j-cell-group title="边距" style="margin: 20rpx 40rpx">
            <j-cell custom-prefix="false" icon="https://statics.xmcsrv.net/account/HeadImage/jlink_7610.png" title="有图标了" sub-title="图标使界面更好看了" tips="小北北"></j-cell>
        </j-cell-group>

        <j-cell-group title="高度与最大显示高度" style="margin: 20rpx 40rpx" height="1300rpx" max-height="300rpx">
            <j-cell title="cell列表" v-for="item in 10" :key="item"></j-cell>
        </j-cell-group>
		
		
		
		
		
		
		
		
		
		

        <view style="padding: 50rpx 0; text-align: center">--- cell ---</view>
		<j-cell title="只有标题没有箭头" :more="false"></j-cell>
		<j-cell title="有标题和箭头"></j-cell>
		<j-cell title="副标题有了" sub-title="给副标题取个名字吧"></j-cell>
		<j-cell title="再加个提示文字吧" sub-title="文字提示是小字" tips="小贴士啊"></j-cell>
		<j-cell icon="icon-settings" title="有字体图标了" sub-title="图标使界面更好看了" tips="小北北"></j-cell>
		<j-cell custom-prefix="false" icon="https://statics.xmcsrv.net/account/HeadImage/jlink_7610.png" title="有图片图标了" sub-title="图标使界面更好看了" tips="小北北"></j-cell>
		<j-cell custom-prefix="false" icon="https://statics.xmcsrv.net/account/HeadImage/jlink_7610.png" title="有圆角图片图标了" sub-title="图标使界面更好看了" tips="小北北" radius></j-cell>

		<j-cell sub-title="自定义是经常使用到的功能" tips="tips">
			<view slot="title" style="font-size: 36rpx; color: orange">自定义title</view>
		</j-cell>

		<j-cell title="自定义subTitle" tips="tips">
			<view slot="subTitle" style="font-size: 24rpx; color: orange">自定义subTitle</view>
		</j-cell>

		<j-cell title="自定义tips" sub-title="自定义是经常使用到的功能">
			<view slot="tips" style="font-size: 24rpx; color: orange">自定义tips</view>
		</j-cell>

		<j-cell title="自定义tips" sub-title="自定义是经常使用到的功能" :more="false">
			<view slot="tips" style="font-size: 24rpx; color: orange;margin-right:20rpx;">自定义tips-无箭头</view>
		</j-cell>

		<j-cell title="自定义tips" sub-title="自定义是经常使用到的功能" :more="false">
			<view slot="tips" style="margin-right:20rpx;">
				<switch></switch>
			</view>
		</j-cell>

		<j-cell title="这是一个链接" sub-title="可以链接到任何地方" tips="还有不同的跳转方式" to="/jvss/pagesMine/about/about"></j-cell>
		<j-cell title="禁用标题" sub-title="禁止链接及其他操作" tips="反正就是不能动" to="/jvss/pagesMine/about/about" disabled></j-cell>
		<j-cell title="选中了" sub-title="选中的效果还是可以的" tips="说明这条被选中了" actived></j-cell>











        <view style="padding: 50rpx 0; text-align: center">--- cell-slider(在cell基础上的变体) ---</view>
		<j-cell-slider title="只有标题没有箭头" :more="false"></j-cell-slider>
		<j-cell-slider title="有标题和箭头"></j-cell-slider>
		<j-cell-slider title="副标题有了" sub-title="给副标题取个名字吧"></j-cell-slider>
		<j-cell-slider title="再加个提示文字吧" sub-title="文字提示是小字" tips="小贴士啊"></j-cell-slider>
		<j-cell-slider icon="icon-settings" title="有字体图标了" sub-title="图标使界面更好看了" tips="小北北"></j-cell-slider>
		<j-cell-slider custom-prefix="false" icon="https://statics.xmcsrv.net/account/HeadImage/jlink_7610.png" title="有图片图标了" sub-title="图标使界面更好看了" tips="小北北"></j-cell-slider>
		<j-cell-slider custom-prefix="false" icon="https://statics.xmcsrv.net/account/HeadImage/jlink_7610.png" title="有圆角图片图标了" sub-title="图标使界面更好看了" tips="小北北" radius></j-cell-slider>

		<j-cell-slider sub-title="自定义是经常使用到的功能" tips="tips">
			<view slot="title" style="font-size: 36rpx; color: orange">自定义title</view>
		</j-cell-slider>

		<j-cell-slider title="自定义subTitle" tips="tips">
			<view slot="subTitle" style="font-size: 24rpx; color: orange">自定义subTitle</view>
		</j-cell-slider>

		<j-cell-slider title="自定义tips" sub-title="自定义是经常使用到的功能" :more="false">
			<view slot="tips" style="font-size: 24rpx; color: orange;margin-right:20rpx;">自定义tips</view>
		</j-cell-slider>

		<j-cell-slider title="自定义tips" sub-title="自定义是经常使用到的功能" :more="false">
			<view slot="tips" style="margin-right:20rpx;">
				<switch></switch>
			</view>
		</j-cell-slider>

		<j-cell-slider ref="jslider" title="自定义action" sub-title="自定义是经常使用到的功能" tips="tips" :action="false">
			<view slot="action" style="width: 90rpx; height: 100%; display: flex; justify-content: center; align-items: center">
				<uni-icons custom-prefix="iconfont" type="icon-xinxi-" size="32" @tap="tapEdit"></uni-icons>
			</view>
		</j-cell-slider>

		<j-cell-slider ref="jcell" title="自定义action" sub-title="自定义是经常使用到的功能" tips="tips" :translate-x="160" @jfdelete="onBindJfDelete(1)">
			<view slot="action" style="height: 100%">
				<view
					style="background: blue; height: 100%; display: flex; justify-content: center; align-items: center; padding: 0 40rpx; font-size: 26rpx"
					@tap="onBintapEdit(2)"
				>
					编辑
				</view>
			</view>
		</j-cell-slider>

		<j-cell-slider title="这是一个链接" sub-title="可以链接到任何地方" tips="还有不同的跳转方式" to="/jvss/pagesMine/about/about"></j-cell-slider>
		<j-cell-slider title="禁用标题" sub-title="禁止链接及其他操作" tips="反正就是不能动" to="/jvss/pagesMine/about/about" disabled></j-cell-slider>
		<j-cell-slider title="选中了" sub-title="选中的效果还是可以的" tips="说明这条被选中了" actived></j-cell-slider>











        <view style="padding: 50rpx 0; text-align: center">--- card(在cell-slider基础上的变体) ---</view>
		<j-cell-group>
			<j-cell-card title="只有标题且默认展开的Card" :more="false">
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card title="有标题和箭头且默认展开的Card">
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card title="副标题有了" sub-title="给副标题取个名字吧">
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card title="再加个提示文字吧" sub-title="文字提示是小字" tips="小贴士啊"> 
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card icon="icon-settings" title="有字体图标了" sub-title="图标使界面更好看了" tips="小北北">
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card custom-prefix="false" icon="https://statics.xmcsrv.net/account/HeadImage/jlink_7610.png" title="有图片图标了" sub-title="图标使界面更好看了" tips="小北北">
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card custom-prefix="false" icon="https://statics.xmcsrv.net/account/HeadImage/jlink_7610.png" title="有圆角图片图标了" sub-title="图标使界面更好看了" tips="小北北" radius>
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card sub-title="自定义是经常使用到的功能" tips="tips">
				<view slot="title" style="font-size: 36rpx; color: orange">自定义title</view>
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card title="自定义subTitle" tips="tips">
				<view slot="subTitle" style="font-size: 24rpx; color: orange">自定义subTitle</view>
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card title="自定义tips" sub-title="自定义是经常使用到的功能" :more="false">
				<view slot="tips" style="font-size: 24rpx; color: orange;margin-right:20rpx;">自定义tips</view>
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card title="自定义tips" sub-title="自定义是经常使用到的功能" :more="false">
				<view slot="tips" style="margin-right:20rpx;">
					<switch></switch>
				</view>
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card ref="jslider" title="自定义action" sub-title="自定义是经常使用到的功能" tips="tips" :action="false">
				<view slot="action" style="width: 90rpx; height: 100%; display: flex; justify-content: center; align-items: center">
					<uni-icons custom-prefix="iconfont" type="icon-xinxi-" size="32" @tap="tapEdit"></uni-icons>
				</view>
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card ref="jcell" title="自定义action" sub-title="自定义是经常使用到的功能" tips="tips" :translate-x="160" @jfdelete="onBindJfDelete(1)">
				<view slot="action" style="height: 100%">
					<view
						style="background: blue; height: 100%; display: flex; justify-content: center; align-items: center; padding: 0 40rpx; font-size: 26rpx"
						@tap="onBintapEdit(2)"
					>
						编辑
					</view>
				</view>
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card title="这是一个链接" sub-title="可以链接到任何地方" tips="还有不同的跳转方式" to="/jvss/pagesMine/about/about">
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card title="禁用标题" sub-title="禁止链接及其他操作" tips="反正就是不能动" to="/jvss/pagesMine/about/about" disabled>
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card title="选中了" sub-title="选中的效果还是可以的" tips="说明这条被选中了" actived>
				<view style="padding:20rpx;">Card自定义内容</view>
			</j-cell-card>
		</j-cell-group>
		
		<j-cell-group>
			<j-cell-card 
				title="标题" 
				sub-title="副标题" 
				tips="提示" 
				border 
				@jfheadertap="onBindjfheadertap" 
				@jfcontenttap="onBindjfcontenttap" 
				@jfdelete="onBindJfDelete"
			>
				<view style="padding:20rpx;">
					<button type="primary" @tap="onBindtap" style="font-size: 24rpx">点击我触发按钮事件</button>
					<view style="width: 200rpx; height: 200rpx; background: red; color: #ffffff; font-size: 24rpx">点击红色区域不触发事件,点击空白处触发 bindjfcontenttap 事件</view>
				</view>
			</j-cell-card>
		</j-cell-group>

		<j-cell-group>
			<j-cell-card
				title="标题"
				sub-title="副标题"
				border
				:more="false"
				:stop-propagation="false"
				@jfheadertap="onBindjfheadertap"
				@jfcontenttap="onBindjfcontenttap"
				@jfdelete="onBindJfDelete"
			>
				<view slot="tips">
					<switch></switch>
				</view>
				<view style="padding:20rpx;">
					<button type="primary" @tap="onBindtap" style="width: auto; font-size: 24rpx">点击我触发按钮事件,并且冒泡触发 bindjfcontenttap 事件</button>
					<view style="width: 200rpx; height: 200rpx; background: red; color: #ffffff; font-size: 24rpx">点击红色区域冒泡触发 bindjfcontenttap 事件</view>
				</view>
			</j-cell-card>
		</j-cell-group>
    </view>
</template>

<script>
// pages/test/test.js
export default {
    data() {
        return {};
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.showNavigationBarLoading();
        setTimeout(() => {
            uni.hideNavigationBarLoading();
            uni.stopPullDownRefresh();
        }, 1000);
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
		showControl(){
			this.$refs.popup.open()
		},
        onBindtap(ev) {
            console.log('普通子节点单击：', ev);
        },

        // cellGroup右侧按钮事件
        onBindjftap(ev) {
            console.log('自定义事件-tap：', ev);
        },

        onBindjfheadertap(ev) {
            console.log('自定义事件-header：', ev);
        },

        onBindjfcontenttap(ev) {
            console.log('自定义事件-content：', ev);
        },

        // 删除
        onBindJfDelete(ev) {
            console.log('删除', ev);
        },
		
		tapEdit(ev){
			console.log(ev);
			this.$refs.jslider.onBindHide();
		},

        // 自定义隐藏按钮事件
        onBintapEdit(ev) {
            console.log('自定义隐藏按钮事件：', ev);
            this.$refs.jcell.onBindHide();
        }
    }
};
</script>
<style></style>
